<template>
  <div v-if="visible">
    <el-dialog :before-close="onCloseDialog" :title="title" :visible.sync="visible">
      <el-form :rules="rules.sysModule" label-width="120px" :model="form" ref="moduleForm">
        <el-form-item label="模块名称" prop="modulename">
          <el-input v-model="form.modulename"></el-input>
        </el-form-item>
        <el-form-item label="path">
          <el-input v-model="form.moduleurl"></el-input>
        </el-form-item>
        <el-form-item label="父级模块" prop="moduleparentid">
          <el-select style="width: 100%" v-model="form.moduleparentid">
            <el-option style="color: #67C23A;" label="主模块" value="0"></el-option>
            <el-option
              v-for="item in auth"
              :key="item.moduleid"
              :label="item.modulename"
              :value="item.moduleid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="redirect">
          <el-input v-model="form.redirect"></el-input>
        </el-form-item>
        <el-form-item label="component">
          <el-input v-model="form.component"></el-input>
        </el-form-item>
        <el-form-item label="模块状态" prop="modulestatus">
          <el-switch
            v-model="form.modulestatus"
            active-value="1"
            inactive-value="0"
            active-text="启用"
          ></el-switch>
        </el-form-item>
        <!-- <el-form-item label="是否隐藏" prop="hidden">
          <el-select style="width: 100%" v-model="form.hidden" placeholder="请选择">
            <el-option label="显示" value="false"></el-option>
            <el-option label="隐藏" value="true"></el-option>
          </el-select>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onCloseDialog">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import rules from "./formRules.js";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    auth: Array,
    title: {
      type: String,
      default: "添加模块"
    },
    propForm: {
      type: Object,
      default: null
    }
  },
  name: "addModuleDialog",
  data() {
    return {
      rules,
      form: {
        modulename: "",
        moduleurl: "",
        moduleicon: "",
        moduleparentid: "",
        modulestatus: "",
        moduledescription: "",
        moduleremarks: "",
        name: "",
        componet: "",
        redirect: "",
        moduleid: ""
      },
      newArray: []
    };
  },
  methods: {
    onCloseDialog() {
      this.$emit("closeDialog");
    },
    async onSubmit() {
      try {
        let form = {
          modulename: this.form.modulename || "",
          moduleurl: this.form.moduleurl || "",
          parentmoduleid: this.form.moduleparentid || "",
          modulestatus: this.form.modulestatus || "",
          modulecomponet: this.form.component || "",
          name: this.form.modulename || "",
          redirect: this.form.redirect || ""
        };
        //console.log(form);
        const res = this.propForm
          ? await this.$api.put(
              `http://139.9.249.149:8081/judge/module`,
              { ...form, moduleid: this.form.moduleid },
              { autoAlert: false, returnAll: true }
            )
          : await this.$api.post(
              `http://139.9.249.149:8081/judge/module`,
              form,
              { autoAlert: false, returnAll: true }
            );
        if (res.code === "200") {
          this.$emit("refreshTable", this.form.moduleparentid);
          this.onCloseDialog();
        } else throw "fail";
      } catch (e) {
        console.log(e);
      }
    }
  },
  watch: {
    propForm(data) {
      //console.log("弹窗", data);
      if (data) {
        this.form = {
          redirect: data.redirect,
          component: data.modulecomponet,
          moduleid: data.moduleid,
          modulename: data.modulename,
          moduleurl: data.moduleurl,
          moduleicon: data.moduleicon,
          moduleparentid: data.parentmoduleid,
          modulestatus: data.modulestatus,
          moduleordernum: data.moduleordernum
        };
        //console.log(data);
        //console.log(this.form);
      }
    },
    visible(data) {
      data &&
        setTimeout(() => {
          this.$refs["moduleForm"].resetFields();
        }, 0);
      if (!this.propForm) {
        this.form = {
          modulename: "",
          moduleurl: "",
          moduleicon: "",
          moduleparentid: "",
          modulestatus: "1",
          moduledescription: "",
          moduleremarks: "",
          name: "",
          hidden: "",
          componet: "",
          redirect: "",
          breadcrumb: "",
          props: "",
          activemenu: ""
        };
      }
    }
  }
};
</script>

<style scoped>
</style>
